<template>
  <view class="me-container">
    <!-- 顶部个人信息卡片 -->
    <view class="profile-card">
      <view class="profile-bg" >
        <!-- <image class="bg-image" src="@/static/sunflower.jpg" mode="aspectFill"></image> -->
        <!-- <view class="bg-overlay" style="margin-bottom: 20rpx;"></view> -->
      </view>
      <view class="profile-info">
        <view class="avatar-container">
          <image class="avatar" src="@/static/rose.jpg" mode="aspectFill"></image>
          <view class="vip-badge">VIP</view>
        </view>
        <view class="user-details">
          <text class="username">UU花艺爱好者</text>
          <view class="user-id">
            <text class="id-text">ID: 8864390</text>
            <view class="copy-icon">复制</view>
          </view>
        </view>
        <view class="edit-profile">
          <text class="edit-text">编辑资料</text>
          <text class="edit-icon">></text>
        </view>
      </view>
      <view class="stats-row">
        <view class="stat-item">
          <text class="stat-value">268</text>
          <text class="stat-label">关注</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">1024</text>
          <text class="stat-label">粉丝</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">356</text>
          <text class="stat-label">获赞</text>
        </view>
      </view>
    </view>

    <!-- 功能模块 -->
    <view class="feature-modules">
      <!-- 我的服务 -->
      <view class="module-card">
        <view class="module-header">
          <text class="module-title">我的服务</text>
        </view>
        <view class="service-grid">
          <view class="service-item" v-for="(item, index) in services" :key="index">
            <image class="service-icon" :src="item.icon"></image>
            <text class="service-name">{{item.name}}</text>
          </view>
        </view>
      </view>

      <!-- 我的花艺 -->
      <view class="module-card">
        <view class="module-header">
          <text class="module-title">我的花艺</text>
          <text class="module-more">查看全部 ></text>
        </view>
        <view class="flower-cards">
          <view class="flower-card" v-for="(item, index) in flowers" :key="index">
            <image class="flower-image" :src="item.image" mode="aspectFill"></image>
            <view class="flower-info">
              <text class="flower-name">{{item.name}}</text>
              <view class="flower-meta">
                <text class="flower-date">{{item.date}}</text>
                <view class="flower-likes">
                  <text class="like-icon">♥</text>
                  <text class="like-count">{{item.likes}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 我的会员 -->
      <view class="module-card membership-card">
        <view class="module-header">
          <text class="module-title">我的会员</text>
          <text class="module-more">查看权益 ></text>
        </view>
        <view class="membership-banner">
          <view class="membership-content">
            <view class="membership-info">
              <text class="membership-level">花艺尊享会员</text>
              <text class="membership-expire">有效期至: 2024-12-31</text>
            </view>
            <view class="membership-button">立即续费</view>
          </view>
          <image class="membership-decoration" src="@/static/hua2.svg"></image>
        </view>
      </view>

      <!-- 我的收藏 -->
      <view class="module-card">
        <view class="module-header">
          <text class="module-title">我的收藏</text>
          <text class="module-more">更多 ></text>
        </view>
        <scroll-view class="collection-scroll" scroll-x="true" show-scrollbar="false">
          <view class="collection-list">
            <view class="collection-item" v-for="(item, index) in collections" :key="index">
              <image class="collection-image" :src="item.image" mode="aspectFill"></image>
              <text class="collection-name">{{item.name}}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 底部安全区域 -->
    <view class="safe-area-bottom"></view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 服务数据
const services = ref([
  { name: '订单', icon: '/static/c1.png' },
  { name: '钱包', icon: '/static/c2.png' },
  { name: '客服', icon: '/static/c3.png' },
  { name: '收藏', icon: '/static/c4.png' },
  { name: '地址', icon: '/static/c5.png' },
  { name: '设置', icon: '/static/c6.png' },
  { name: '帮助', icon: '/static/c7.png' },
  { name: '签到', icon: '/static/c8.png' }
]);

// 花艺作品数据
const flowers = ref([
  { 
    name: '春日玫瑰花束', 
    image: '/static/rose.jpg', 
    date: '2024-06-15', 
    likes: 128 
  },
  { 
    name: '向日葵与绿叶', 
    image: '/static/sunflower.jpg', 
    date: '2024-06-10', 
    likes: 86 
  }
]);

// 收藏数据
const collections = ref([
  { name: '多肉植物', image: '/static/duorou207828_1280.jpg' },
  { name: '红酒配花', image: '/static/wine-leaf-56053_1280.jpg' },
  { name: '向日葵', image: '/static/sunflower.jpg' },
  { name: '玫瑰花', image: '/static/rose.jpg' }
]);

</script>

<style scoped>
/* 基础样式 */
.me-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

/* 顶部个人信息卡片 */
.profile-card {
  position: relative;
  margin-bottom: 24rpx;
  background: #fff;
  border-radius: 0 0 30rpx 30rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.profile-bg {
  position: relative;
  height: 100rpx;
}

.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
}

.profile-info {
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  margin-top: -80rpx;
  position: relative;
  z-index: 2;
}

.avatar-container {
  position: relative;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 6rpx solid #fff;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.vip-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: linear-gradient(135deg, #FF9A9E 0%, #FF5758 100%);
  color: #fff;
  font-size: 20rpx;
  font-weight: bold;
  padding: 6rpx 12rpx;
  border-radius: 20rpx;
  border: 2rpx solid #fff;
}

.user-details {
  flex: 1;
  margin-left: 24rpx;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.user-id {
  display: flex;
  align-items: center;
}

.id-text {
  font-size: 24rpx;
  color: #999;
}

.copy-icon {
  font-size: 22rpx;
  color: #999;
  background: rgba(0, 0, 0, 0.05);
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  margin-left: 12rpx;
}

.edit-profile {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.05);
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
}

.edit-text {
  font-size: 24rpx;
  color: #666;
}

.edit-icon {
  font-size: 24rpx;
  color: #999;
  margin-left: 4rpx;
}

.stats-row {
  display: flex;
  padding: 30rpx;
  border-top: 2rpx solid #f5f5f5;
  margin-top: 30rpx;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 6rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
}

/* 功能模块 */
.feature-modules {
  padding: 0 24rpx;
}

.module-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.module-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.module-more {
  font-size: 24rpx;
  color: #999;
}

/* 服务网格 */
.service-grid {
  display: flex;
  flex-wrap: wrap;
}

.service-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.service-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 12rpx;
}

.service-name {
  font-size: 24rpx;
  color: #666;
}

/* 花艺卡片 */
.flower-cards {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.flower-card {
  display: flex;
  background: #f9f9f9;
  border-radius: 16rpx;
  overflow: hidden;
}

.flower-image {
  width: 180rpx;
  height: 180rpx;
  object-fit: cover;
}

.flower-info {
  flex: 1;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flower-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}

.flower-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flower-date {
  font-size: 22rpx;
  color: #999;
}

.flower-likes {
  display: flex;
  align-items: center;
}

.like-icon {
  font-size: 24rpx;
  color: #ff5758;
  margin-right: 6rpx;
}

.like-count {
  font-size: 22rpx;
  color: #999;
}

/* 会员模块 */
.membership-card {
  background: linear-gradient(135deg, #fff8f8 0%, #fff 100%);
}

.membership-banner {
  position: relative;
  background: linear-gradient(135deg, #FFD3A5 0%, #FD6585 100%);
  border-radius: 16rpx;
  padding: 30rpx;
  overflow: hidden;
}

.membership-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.membership-info {
  display: flex;
  flex-direction: column;
}

.membership-level {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.membership-expire {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
}

.membership-button {
  background: rgba(255, 255, 255, 0.2);
  border: 2rpx solid rgba(255, 255, 255, 0.5);
  border-radius: 30rpx;
  padding: 12rpx 30rpx;
  color: #fff;
  font-size: 26rpx;
}

.membership-decoration {
  position: absolute;
  right: -20rpx;
  bottom: -20rpx;
  width: 150rpx;
  height: 150rpx;
  opacity: 0.2;
}

/* 收藏模块 */
.collection-scroll {
  margin: 0 -30rpx;
  padding: 0 30rpx;
}

.collection-list {
  display: flex;
  gap: 20rpx;
}

.collection-item {
  width: 200rpx;
  display: flex;
  flex-direction: column;
}

.collection-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  margin-bottom: 12rpx;
}

.collection-name {
  font-size: 26rpx;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 底部安全区域 */
.safe-area-bottom {
  height: 40rpx;
}
</style>
